<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style:none;
        }
        img{
        	vertical-align: bottom;
        }
        .box{
            height: 380px;
            width: 820px;
            margin:100px auto;
            overflow: hidden;
        }
        .box .img_list{
        	width: 500%;
        	height: 340px;
        }
        .box .img_list li{
        	float: left;
        	width: 820px;
        	height: 340px;
        }
        .box .title_list{
        	height: 40px;
        	background: #e3e2e2;
        }
        .box .title_list span{
        	float: left;
        	width: 164px;
        	text-align: center;
        	height: 38px;
        	line-height: 38px;
        	border-bottom: 2px solid #e3e2e2;
            cursor: pointer;
            font-size:14px;
        }
        .box .title_list span.current{
            background: #f7f6f6;
            color: #ab8e66;
            border-bottom: 2px solid #cea861;
        }
    </style>
</head>
<body>
    <div class="box">
    	<ul class="img_list">
    		<li><a href="#"><img src="images/1.jpg"/></a></li>
    		<li><a href="#"><img src="images/2.jpg"/></a></li>
    		<li><a href="#"><img src="images/3.jpg"/></a></li>
    		<li><a href="#"><img src="images/4.jpg"/></a></li>
    		<li><a href="#"><img src="images/5.jpg"/></a></li>
    	</ul>
    	<div class="title_list">
    		<span class="current">FPX冠军皮肤</span>
    		<span>魔女 婕拉 至臻</span>
    		<span>2020LPL春季赛季后赛</span>
    		<span>挑战主播赢现金</span>
    		<span>每周限时优惠</span>
    	</div>
    </div>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        // 鼠标移上.box盒子停止定时器
        $(".box").on("mouseover",function(){
            window.clearInterval( timer );
            timer = null;
        })

        // 鼠标移出.box盒子重新开启定时器
        $(".box").on("mouseout",function(){
            if( timer == null ){
                timer = setInterval(function(){
                    currentIndex++;
                    if( currentIndex == $(".title_list span").length){
                        currentIndex = 0;
                    }
                    goto( currentIndex );
                },1500)
            }
        })

        // 鼠标移上事件
    	$(".title_list span").on("mouseover",function(){
            goto( $(this).index() );
            currentIndex = $(this).index();
        })

        // 封装一个跳转到指定索引号的函数,索引号从0开始
        function goto( index ){
            $(".title_list span").eq(index).addClass("current").siblings().removeClass('current');

            $(".img_list").stop().animate({
                "marginLeft":-index*$(".box").width()
            })
        }

        // 定义一个变量currentIndex保存当前索引号
        var currentIndex = 0;
        
        // 开启定时器
        var timer = setInterval(function(){
            currentIndex++;
            if( currentIndex == $(".title_list span").length){
                currentIndex = 0;
            }
            goto( currentIndex );
        },1500)
    </script>
</body>
</html>